<!-- 项目成员管理组件 -->
<template>
	<div>
		<el-dialog title="新增成员" :visible.sync="addDialogStatus" width="1100px">
			<el-form>
				<el-form-item label="选择角色:">
					<el-select v-model="addParam.saveRoleId" placeholder="角色" clearable @change="loadUser()">
						<el-option v-for="item in roleList" :label="item.roleName" :value="item.roleId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="选择人员:">
					<br>
					<el-checkbox-group v-model="saveUserIds" @change="handleCheckedChange">
						<span v-for="(item,index) in userList">
							<br v-if="index %3 ==0&&index!=0">
							<el-checkbox :label="item.userId" size="small" border style="margin-top: 10px;">
								{{item.userAccountName}}
							</el-checkbox>

						</span>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="addDialogStatus = false">取消</el-button>
				<el-button type="primary" @click="addMember">提交</el-button>
			</div>
		</el-dialog>

		<el-dialog :visible.sync="updateDialogStatus">
			<el-tabs>
				<el-tab-pane v-for="(item,index) in roleList" v-show="item.roleId==1 || item.roleId==2? false:true"
					:label="item.roleName" :name="index">
					<div>

					</div>
				</el-tab-pane>
			</el-tabs>
			<div slot="footer">
				<el-button @click="updateDialogStatus = false">取消</el-button>
				<el-button type="primary" @click="updateMember">提交</el-button>
			</div>
		</el-dialog>
		<div>
			<!-- :content=this.menberList[0].projectName -->
			<el-page-header @back="goBack" :content="project.projectName"></el-page-header>
			<el-button @click="openAddForm">新增</el-button>
			<el-button @click="openUpdateForm">修改</el-button>
		</div>
		<div>
			<el-table :data="menberList" >
				<el-table-column stripe type="index" label="No." align="center" width="100px">
				</el-table-column>
				<el-table-column prop="userAccountName" label="姓名">
				</el-table-column>
				<el-table-column prop="roleName" label="角色" :filters="Memberfilters" :filter-method="filterTag">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="small" round @click="removeMember(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'member',
		data() {
			return {
				addDialogStatus: false,
				updateDialogStatus: false,
				projectId: null,
				squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
				menberList: [],
				userList: [],
				roleList: [],
				delParam: {
					projectId: null,
					userId: null,
					roleId: null
				},
				addParam: {
					saveUserIds: [],
					saveRoleId: null,
					projectId: null,
					// createPersonId:null
				},
				saveUserIds: [],
				roleParam: {
					projectId: null,
					roleId: null
				},
				updateParam: {

				},
				project: {},
				memberSpan: {
					userAccountName: "",
					count: ""
				},
				memberSpans: [],
				Memberfilter: {
					text: "",
					value: ""
				},
				Memberfilters: []
			}
		},
		methods: {
			//过滤
			filterTag(value, row) {
				return row.tag === value;
			},
			//合并列
			arraySpanMethod(row, column, rowIndex, columnIndex) {
				console.log(row)
				return [this.rowSpan(row.userId), 1]
				// return [1, this.rowSpan(row.userId)]
			},
			rowSpan(userId) {
				var members = this.menberList
				var count = 0
				for (var i in members) {
					if (members[i].userId == userId) {
						count++
					}
				}
				return count
			},
			//加载成员 
			loadMember() {
				let json = localStorage.getItem("project");
				this.project = JSON.parse(json)
				this.projectId = this.project.projectId
				this.$http.post("/member/query/" + this.projectId).then(resp => {
					if (resp.data.flag) {
						this.menberList = resp.data.data
						var menberList = this.menberList
						// 清空过滤器
						// this.Memberfilters=[]
						// for (var i in menberList) {
						// 	this.Memberfilter={
						// 		text:menberList.roleNmae,
						// 		value:menberList.roleId
						// 	}
						// 	this.Memberfilters.push(this.Memberfilter)
						// }
					}
				})
			},
			//打开新增成员框
			openAddForm() {
				this.addDialogStatus = true

			},
			//打开更新窗口
			openUpdateForm() {
				this.updateDialogStatus = true
			},
			// //加载所有user
			// loadUser(){
			// 	this.$http.get("/user/query").then(resp => {
			// 		if (resp.data.flag) {
			// 			// console.log(resp.data.data)
			// 			this.userList=resp.data.data;
			// 		}
			// 	})
			// },
			//加载可用user
			loadUser() {
				this.saveUserIds = [],
					this.userList = [],
					this.roleParam.roleId = this.addParam.saveRoleId
				this.roleParam.projectId = this.projectId
				this.$http.post("/project/queryProjectUser", this.roleParam).then(resp => {
					if (resp.data.flag) {
						console.log(resp.data.data)
						this.userList = resp.data.data;
					}
				})
			},
			//加载所有项目role
			loadRole() {
				this.$http.get("/role/queryByProject").then(resp => {
					if (resp.data.flag) {
						this.roleList = resp.data.data;
						console.log(this.roleList)
					}
				})
			},
			//新增成员
			addMember() {
				this.addParam.projectId = this.projectId
				this.addParam.saveUserIds = this.saveUserIds
				console.log(this.addParam)
				this.$confirm('是否添加?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post("/member/save", this.addParam).then(resp => {
						if (resp.data.flag) {
							this.saveUserIds = []
							this.addDialogStatus = false
							this.loadMember()
						}
					})
				}).catch(() => {});

				console.log(this.addParam)
			},
			//修改成员
			updateMember() {

			},
			//移除成员
			removeMember(rowObj) {
				this.delParam.roleId = rowObj.roleId;
				this.delParam.projectId = rowObj.projectId;
				this.delParam.userId = rowObj.userId
				this.$http.post("/member/del", this.delParam).then(resp => {
					if (resp.data.flag) {
						this.delParam = {},
							this.loadMember()
					}
				})
			},
			//返回项目管理
			goBack() {
				this.$router.push("/main/project")
			},
			handleCheckedChange(value) {
				console.log(value)
			},
		},
		created() {
			this.loadMember(),
				this.loadRole()
		},

	}
</script>
<style>
	.person-check {
		margin-left: 90px;
	}

	.person-check-box {
		float: left;
		width: 200px;
	}

	.role-check {
		margin-left: 90px;
	}

	.role-check-box {
		float: left;
		width: 200px;
	}
</style>
